<template>
    <div class="sys-page">
        <app-title title="用户锁定状态管理"  style="display:inline;"></app-title>
<el-button type="success" @click="refresh()" round style="float:right; margin-top:10px;" icon="el-icon-refresh">刷新</el-button>
            <el-table v-loading="loading" border :data="tableData.body" :row-class-name="tableRowClassName">
                <el-table-column prop="userName" label="用户名"  align="center"></el-table-column>
                <el-table-column prop="lockType" label="锁定状态"  align="center">
                     <template slot-scope="scope" >
                         <el-switch v-model="scope.row.lockType" active-color="#ff4949"
                            inactive-color="#13ce66" ></el-switch>
                    </template>
                    
                </el-table-column>
                
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="ok(scope.row.userName, scope.row.lockType)">应用</el-button>
                    </template>
                </el-table-column>
            </el-table>
    </div>

</template>
<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>
<script>


export default {
    name: 'userlockstatus',
    data(){
        return {
            dialogTitle:"用户锁定状态管理",
            failcnt:1,
            loading: false,
            editTableShow: false,
            selectVal:1,
            tableData:{
                body:[],
                head:[],
                loading:true
            },

            errorMsg:"您的信息有误，请联系管理员修改",
            issafe:true
       
       }
    },

    mounted(){
        this.query()
    },

    methods:{
        refresh(){
            this.query()
        },
        tableRowClassName({row, rowIndex}) {
          if(this.issafe === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        ok(userName, lockType){
            let oldStatus = lockType==true?0:1;
            let curStatus = lockType==true?1:0;
            let data = {
                userName: userName,
                lockType: curStatus
            };

            this.HTTP.methods.apiPost("/user/status.shtml",data).then(res => 
                {
                   if (res.code != 200) {
                        this.$message(res.msg, 'error');
                        row.status = oldStatus;
                    } else {
                        this.$message("修改成功", 'success');
                    }
                    this.loading = false
                }).catch(function (error) {
                    this.$message("网络超时", 'error')
                })
        },
        cancel(){
            this.editTableShow = false
            this.failcnt = 1
            this.selectVal = 1

        },
        query(){
            this.HTTP.methods.apiGet("/user/findall.shtml?pageNum=1&pageSize=100").then(res =>
                {
                    if(res.code != 200){
                         this.$message(res.msg, 'error')
                    }else{
                        for(let i=0; i<res.data.list.length; i++){
                            res.data.list[i].lockType = res.data.list[i].lockType === 0?false:true; 
                        }
                        this.tableData.body = res.data.list
                        this.issafe = res.issafe

                    }
                    this.loading = false
                }
            ).catch(function (error) {
                    this.$message("网络超时", 'error')
                    this.loading = false
            })
        }
    }
}
</script>

    
